<template>
  <div>
    <el-row type="flex" justify="center" align="center">
      <el-col :span="14">
        <el-skeleton :loading="loading" animated>
          <template slot="template">
            <div class="cbox">
              <el-skeleton-item variant="h1" style="font-size: 1.2rem;width: 300px;height: 50px;margin: 20px 0;"/>
              <el-skeleton-item variant="image" style="width: 99px; height: 99px;margin: 0 0 20px 0"/>
              <el-skeleton-item variant="p" style="width: 50%;margin-bottom: 20px;padding: 10px 0"/>
              <el-skeleton-item variant="p" style="width: 80%;padding: 10px 0"/>
            </div>
          </template>
          <template>
            <div style="text-align: center">
              <h1 style="font-size: 2.5rem">无奇不邮</h1>
              <img src="https://lxpstr-1307443497.cos.ap-nanjing.myqcloud.com/Logo.cf7c580b.svg" alt="无奇不邮Logo" title="无奇不邮Logo" width="99" height="99"
                   style="margin:0 0  20px 0"/>
              <div>
                <h1 style="font-size: 1.2rem">本项目核心提供海量邮件的推广</h1>
                <p style="color: #b0b0b0;font-weight: lighter;">工欲其事，必先利其器。居是邦也，事其大夫之賢者，友其士之仁者。</p>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {mapActions, mapGetters} from "vuex";

export default {
  name: "AboutProject",
  data() {
    return {}
  }, mounted() {
    this.asyncChangeTempLoading(false);
  },
  methods: {
    ...mapActions({asyncChangeTempLoading: 'asyncChangeTempLoading'})
  },
  computed: {
    ...mapGetters({loading: "getTempLoading"})
  }
}
</script>

<style scoped>
.cbox {
  display: flex;
  flex-flow: column;
  align-items: center;
}
</style>